<template>
    <div>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="showAddRegionDialog">新增区域</el-button>
          <el-button type="primary" @click="toggleEditMode">{{ editing ? '保存' : '修改区域' }}</el-button>
          <el-button type="danger" @click="showDeleteRegionDialog">删除区域</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="regions" border @row-click="handleRowClick">
            <el-table-column prop="province" label="所属省份">
              <template slot-scope="scope">
                <el-input v-model="scope.row.province" v-if="editing"></el-input>
                <span v-else>{{ scope.row.province }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="区域名称">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" v-if="editing"></el-input>
                <span v-else>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="areaCode" label="电话区号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.areacode" v-if="editing"></el-input>
                <span v-else>{{ scope.row.areacode }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
  
      <RegionDialog v-if="showRegionDialog" :visible.sync="showRegionDialog" :is-edit="isEdit" :region="currentRegion"
        @close="closeRegionDialog" @save="saveRegion" />
  
      <DeleteRegionDialog v-if="showDeleteDialog" :visible.sync="showDeleteDialog" :region="currentRegion"
        @close="closeDeleteDialog" @delete="confirmDeleteRegion" />
    </div>
  </template>
  
  <script>
  import RegionDialog from './area/RegionDialog.vue';
  import DeleteRegionDialog from './area/DeleteRegionDialog.vue';
  import axios from 'axios';
  
  export default {
    components: {
      RegionDialog,
      DeleteRegionDialog
    },
    data() {
      return {
        regions: [],
        editing: false,
        showRegionDialog: false,
        isEdit: false,
        showDeleteDialog: false,
        currentRegion: null
      };
    },
    methods: {
      fetchRegions() {
        axios.post('/api/area/arealist').then(response => {
          this.regions = response.data;
        });
      },
      showAddRegionDialog() {
        this.isEdit = false;
        this.currentRegion = { province: '', name: '', areaCode: '' };
        this.showRegionDialog = true;
      },
      toggleEditMode() {
        if (this.editing) {
          this.saveEdits();
        } else {
          this.editing = true;
        }
      },
      saveEdits() {
        const duplicates = this.checkForDuplicates();
        if (duplicates.length > 0) {
          this.$message.error('存在重复的数据：' + duplicates.join(', '));
          this.editing = false;
          return;
        }
        axios.post('/api/area/update', this.regions).then(() => {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.editing = false;
          this.fetchRegions();
        }).catch(() => {
          this.$message.error('保存失败');
        });
      },
      showDeleteRegionDialog() {
        if (!this.currentRegion) {
          this.$message.error('请先选择一个区域');
          return;
        }
        this.showDeleteDialog = true;
      },
      closeRegionDialog() {
        this.showRegionDialog = false;
      },
      closeDeleteDialog() {

        this.showDeleteDialog = false;
      },
      saveRegion(region) {
        if (this.isEdit) {
          // 更新区域
          Object.assign(this.currentRegion, region);
        } else {
          // 新增区域
          this.regions.push(region);
        }
        this.refreshData();
      },
      confirmDeleteRegion(region) {
        console.log(region)
        axios.post('/api/area/delete', region).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.regions = this.regions.filter(r => r !== region);
          this.refreshData();
        }).catch(() => {
          this.$message.error('删除失败');
        });
      },
      refreshData() {
        this.fetchRegions();
      },
      checkForDuplicates() {
        const seen = new Set();
        const duplicates = [];
        this.regions.forEach(region => {
          const key = `${region.province}-${region.name}-${region.areaCode}`;
          if (seen.has(key)) {
            duplicates.push(key);
          } else {
            seen.add(key);
          }
        });
        return duplicates;
      },
      handleRowClick(row) {
        this.currentRegion = row;
      }
    },
    mounted() {
      this.fetchRegions();
    }
  };
  </script>
  
  <style scoped>
  /* 样式 */
  </style>
  